<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>

<template>
    <div class="home-main">
        <Row class="system">
            <Col span="24">
                <p>
                    <span class="system-mes"><Icon type="android-volume-up" :size="15"></Icon>系统通知：</span>
                    <transition-group name="flip-list" tag="ul" :class="{meslist:animate=true}">
                        <li v-for="(item,index) in toDoList " :key="'list'+item.title" @click="to(item.id)">{{ item.title }}</li>
                    </transition-group>
                </p>
            </Col>
        </Row>
        <Row class="title">
            <Col :lg="12" :md="12" :sm="12" :xs="12">
                <span class="titname">门店概述</span>  
            </Col>
            <!-- <Col :lg="12" :md="12" :sm="12" :xs="12">
                <Button-group style="float:right">
                    <Button>昨日</Button>
                    <Button>本月</Button>
                    <Button>上月</Button>
                </Button-group>
            </Col> -->
        </Row>
        <Row class="count">
            <Col :lg="6" :md="12" :sm="24" :xs="24">
                <Card shadow class="count-order">
                    <i></i>
                    <div>
                        <h3>本月有效订单总金额</h3>
                        <h1>
                            <span>{{ Number(order_amount).toFixed(2) }}</span>
                        </h1>
                    </div>
                </Card>
            </Col>
            <Col :lg="6" :md="12" :sm="24" :xs="24">
                <Card shadow class="count-order-l">
                    <i></i>
                    <div>
                        <h3>本月有效订单总笔数</h3>
                        <h1>
                            <span>{{ order_count }}笔</span>
                        </h1>
                    </div>
                </Card>
            </Col>
            <Col :lg="6" :md="12" :sm="24" :xs="24">
                <Card shadow class="count-shop">
                    <i></i>
                    <div>
                        <h3>门店总数量</h3>
                        <h1>
                            <span>{{ store_count }}个</span>
                        </h1>
                    </div>
                </Card>
            </Col>
            <Col :lg="6" :md="12" :sm="24" :xs="24">
                <Card shadow class="count-clerk">
                    <i></i>
                    <div>
                        <h3>店员总数量</h3>
                        <h1>
                            <span>{{ staff_count }}人</span>
                        </h1>
                    </div>
                </Card>
            </Col>
        </Row>
        <Row class="title">
            <Col :lg="24" :md="24" :sm="24" :xs="24">
                <span class="titname">收款概述</span>
            </Col>
        </Row>
        <Row class="money-item" :gutter="0">
            <Col v-for="(item,index) in moneyList" :key="index">
                <Card dis-hover>
                    <i-circle :percent="item.scale" :size="140" :stroke-width="8" :trail-width="8"><span>{{item.scale.toFixed(2)}}%</span></i-circle>
                    <Div>
                        <h2>{{item.channel}}</h2>
                        <h1>￥{{ item.amount }}</h1>
                    </Div>
                </Card>
            </Col>    
        </Row>
        <Row class="title">
            <Col :lg="24" :md="24" :sm="24" :xs="24">
                <span class="titname">门店收款排行TOP</span>
            </Col>
        </Row>
        <Row>
            <Col :lg="24" :md="24" :xs="24" :sm="24">
                <Table border :columns="tableColumns" :data="tableData" class="table-item"></Table>
            </Col>
        </Row>
    </div>
</template>

<script>
import CountTo from './../my-components/count-to/CountTo.vue';
import { indexInit } from '@/api/home'
import { noticeInit } from '@/api/notice'

export default {
    name: 'home_index',
    components: {
        CountTo
    },
    data () {
        return {
            endVal: 0,
            mainStyle:{
                fontSize: 'inherit',
                fontWeight: 'inherit'
            },
            animate:false,
            toDoList: [],
            moneyList:[],
            tableColumns:[
                {
                    title: 'TOP',
                    key: 'order',
                    align: 'center',
                    sortable: true,
                    render:(h,params)=>{
                        return h('div',[
                                h('Icon',{
                                    props:{
                                        type: 'color-'+params.index
                                    }
                                }),
                            h('span',params.row.order)
                            
                        ])
                        
                    }
                },  
                {
                    title: '门店ID',
                    key: 'store_id',
                    align: 'center'
                },
                {
                    title: '门店名称',
                    align: 'center',
                    key: 'store_name'
                },
                {
                    title: '门店地址',
                    align: 'center',
                    key: 'store_address'
                },
                {
                    title: '有效订单总金额',
                    align: 'center',
                    key: 'order_amount'
                },
                {
                    title: '有效订单总数',
                    align: 'center',
                    key: 'order_count'
                }
            ],
            tableData:[],
            order_amount: 0,
            order_count: 0,
            store_count: 0,
            staff_count: 0
        };
    },
    created(){
        indexInit().then(Response => {
            if (Response.data.code === 0) {
                this.moneyList = Response.data.data.collection
                this.order_amount = Response.data.data.order_amount
                this.store_count = Response.data.data.store_count
                this.order_count = Response.data.data.order_count
                this.staff_count = Response.data.data.staff_count
                this.tableData = Response.data.data.rank
            } else {
                this.$Message.error('数据获取失败')
            }
        })
        noticeInit().then(Response => {
            if (Response.data.code === 0) {
                this.toDoList = Response.data.data.notices
                
            } else {
                this.$Message.error('数据获取失败')
            }
        })
        setInterval(this.scroll,5000);
    },
     methods: {
        scroll(){
            this.animate = true;
            setTimeout(()=>{
                this.toDoList.push(this.toDoList[0]);
                this.toDoList.shift();
                this.animate = false;
            },500)
        },
        to(id) {
            this.$router.push({name:'notice_list',query: {id: id}})
        }
        
     }
};
</script>
